import { rgb } from 'geotiff'
import React, { useEffect, useState } from 'react'
import { Table, Button, Descriptions } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import DarkCard from '../../../../../../common/DarkCard';
import { resourcePath } from '../../../../../../../utils/resource';



export default function Xq(props) {
    const { detail, rightDetail } = props;
console.log("@@@",rightDetail,detail)
    return (
        <DarkCard style={{
            position: 'absolute',
            right: '10px',
            width: '300px',
            top: '20px',
            bottom: '20px',
            pointerEvents: 'auto',
            borderRadius: 8,
        }} className="layout-v">
            <div style={{
                fontSize: 20,
                fontWeight: "bold",
                borderBottom: "1px solid #eee",
                paddingBottom: 12,
                marginBottom: 12
            }} className='layout-h center'>
                <div className='fill w0'>详情</div>
                <div>
                    <Button size="small" icon={<CloseOutlined />} style={{
                        // color: "#fff"
                    }} onClick={e => {
                        props.onClose?.()
                    }} />
                </div>
            </div>
            <Descriptions column={1} bordered size='large' className="fill h0" style={{
                overflow: 'auto'
            }}>
                {
                    Object.entries(rightDetail).map(([key, value]) => {
                        return (
                            <Descriptions.Item label={key}>{rightDetail[key]}</Descriptions.Item>
                        )
                    })
                }
            </Descriptions>
        </DarkCard>
        // <div style={{
        //     width: 400,
        //     position: "absolute",
        //     right: 30,
        //     top: 30,
        //     bottom: 30,
        //     background: 'rgba(15, 29, 38,0.9)',
        //     // border: '1px solid rgba(9,107,225,0.8)',
        //     pointerEvents: 'auto',
        //     overflow: "auto",
        //     borderRadius: 8
        // }} className="layout-v">
        //     <div style={{
        //         fontSize: 20,
        //         fontWeight: "bold",
        //         marginBottom: 12
        //     }} className='layout-h center'>
        //         <div className='fill w0'>
        //             <div style={{
        //                 background: `url(${resourcePath.blockTitleBg})`,
        //                 height: 36,
        //                 backgroundSize: '100% 100%',
        //                 fontSize: 18,
        //                 lineHeight: '36px',
        //                 paddingLeft: 12,
        //                 fontWeight: "bold",
        //                 overflow: "hidden"
        //             }} title={"qqqqqqqqqqqqqqqqqqqqqqqqqqq"}>
        //                 {/* 这里标题 */}
        //                 详情
        //             </div>
        //         </div>
        //         <div>
        //             <Button size="small" icon={<CloseOutlined />} style={{
        //                 // color: "#fff"
        //             }} onClick={e => {
        //                 props.onClose?.()
        //             }} />
        //         </div>
        //     </div>
        //     <div style={{
        //         margin: 20,
        //     }}>
        //         {
        //             // keyValue.map((a) => {
        //             //     return <div style={{ margin: 10, }}>{a.key} : {a.value}</div>
        //             // })
        //             Object.keys(jutizhi1).map((a)=>{
        //                 return <div style={{ margin: 10, }}>{jutizhi1[a]} : {yxfxxq1[a]} </div>
        //             })
        //         }
        //     </div>
        // </div>
    );
}
